<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.top,
		.banner,
		.main,
		.footer {
			width: 960px;
			text-align: center;
			margin: 0 auto;
			margin-bottom: 10px;
			border: 1px dashed #ccc;
		}
		.top {
			height: 80px;
			background-color: pink;
		}
		.banner {
			height: 120px;
			background-color: purple;
		}
		.main {
			height: 500px;
		}
		.left {
			width: 360px;
			height: 500px;
			background-color: pink;
			float: left;
		}
		.right {
			width: 592px;
			height: 500px;
			background-color: purple;
			float: right;
		}
		.footer {
			height: 150px;
			background-color: black;
		}
	</style>
</head>
<body>
	<div class="top">top</div>
	<div class="banner">banner</div>
	<div class="main">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer">footer</div>
</body>
</html>